// pages/index/index.tsx
import React, { useState } from 'react'
import {View, Text, ScrollView, Image} from '@tarojs/components'
import './index.scss'
import Taro from "@tarojs/taro";
import AdminService from "@/shared/services/admin/admin.service";
import HeaderTitle from "@/components/HeaderTitle";
import {Avatar, Button, InfiniteLoading, Input} from "@nutui/nutui-react-taro";
import {UserModel} from "@/shared/services/model/user";
import {formatBalance} from "@/shared/utils/amountUtil";
import {CostOrderModel, OrderModel} from "@/shared/services/model/order";


const Index: React.FC = () => {

  const [pageNum, setPageNum] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [total, setTotal] = useState(0);
  const [searchPhone, setSearchPhone] = useState("");
  const [orderList,setOrderList] = useState<CostOrderModel[]>([]);

  Taro.useLoad(async () => {
    loadOrderList(false)
  })

  const loadMore = async () => {
    loadOrderList(true)
  }

  const loadOrderList = async (loadMore: Boolean) => {
    let n = pageNum
    if(loadMore){
      n = pageNum + 1
      setPageNum(n)
      console.log(`setPageNum: ${n}`)

    }else{
      console.log(`setPageNum: 1`)

      setPageNum(1)
    }

    let phone = ""
    if(searchPhone.length == 11){
      phone = searchPhone
    }

    console.log(`PageNum: ${n}`)
    let req = { pageNum: n, pageSize: 100,phone: phone }

    let result = await AdminService.rechargeList(req);

    if(result.code == 0){
      setHasMore(result.data.records.length > 0)
      setTotal(result.data.total)
      const newList = result.data.records || [];

      console.log(`orderList: ${loadMore} - ${newList.length}`)
      if (loadMore) {
        setOrderList((prev) => [...prev, ...newList]);
      } else {
        // ✅ 首次加载或刷新时覆盖
        setOrderList(newList);

        if(newList.length < 100){
          setHasMore(false)
        }
      }
    }
  }

  const onPhoneChange = (phone) => {
    if(phone){
      console.log("phone", `搜索具体的手机号${phone}`)
      setSearchPhone(phone)
    }else{
      console.log("phone", `搜索完整数据`)
      setSearchPhone('')
      loadOrderList(false)
    }
  }

  return (
    <View className="pageContainer">
      <View className='order-header'>
        <HeaderTitle title={'充值记录列表'} />
      </View>
      <View className={"sec"}>
        <Text className={'total'}>当前订单总数: {total}</Text>
        <View className="search-bar">
          <Input
            type="digit"
            className="search-input"
            placeholder="请输入手机号搜索用户记录"
            clearable
            value={searchPhone}
            onChange={(val) => onPhoneChange(val)}
          />
          <Button className="search-btn" type="primary" onClick={() => loadOrderList(false)}>
            搜索
          </Button>
        </View>

        {/* 添加滚动容器 */}
        <View className="scroll-container">
          <InfiniteLoading
            target="scroll"
            hasMore={hasMore}
            onLoadMore={loadMore}
            className={'loading'}
            loadingText={<>加载中</>}
            loadMoreText={<>没有更多了</>}
          >
            <View className="user-list">
              <View className='order-list'>
                {orderList.map(item => (
                  <View key={item.id} className='order-item'>
                    <Image
                      src={require('@/assets/icon_product_cover.png')}
                      className='order-image'
                      mode='aspectFill'
                    />
                    <View className='order-info'>
                      <View className='order-service'>店内充值</View>
                      <View className='order-details'>
                        <Text className='order-amount-label'>消费金额：</Text>
                        <Text className='order-amount'>￥{item.amount}</Text>
                      </View>
                      <Text className='order-no'>手机号：{item.phone}</Text>
                      <View className='order-date'>{item.payTime}</View>
                    </View>
                  </View>
                ))}
              </View>
            </View>
          </InfiniteLoading>
        </View>
      </View>
    </View>
  )
}

export default Index
